<template>
  <a-layout>
    <a-layout-header style="background: #fff; padding: 0">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="12">
          <h6 style="margin: 0 0 0 10px">教师评学管理系统</h6>
        </a-col>
        <a-col :span="12" style="text-align: right;">
          <a-button type="primary" style="margin-right:10px;" @click="showCreateModal">创建新评价轮次</a-button>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout-content style="padding: 24px">
      <a-card title="当前评价轮次" style="margin-bottom: 24px">
        <a-table
          :columns="currentEvaluationColumns"
          :dataSource="currentEvaluations"
          :pagination="false"
          rowKey="id"
        >
          <template slot="action" slot-scope="text, record">
            <a-button type="link" @click="viewEvaluation(record)">查看</a-button>
            <a-button type="link" @click="editEvaluation(record)">编辑</a-button>
            <a-button type="link" @click="closeEvaluation(record)" :disabled="record.status === '已结束'">结束</a-button>
          </template>
        </a-table>
      </a-card>

      <a-card title="历史评价轮次">
        <a-table
          :columns="historyEvaluationColumns"
          :dataSource="historyEvaluations"
          rowKey="id"
        >
          <template slot="action" slot-scope="text, record">
            <a-button type="link" @click="viewEvaluation(record)">查看结果</a-button>
          </template>
        </a-table>
      </a-card>

      <!-- 创建/编辑评价轮次模态框 -->
      <a-modal
        title="创建评价轮次"
        :visible="createModalVisible"
        @ok="handleCreateOk"
        @cancel="handleCreateCancel"
        width="800px"
      >
        <a-form :form="form" layout="vertical">
          <a-form-item label="评价轮次名称">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入评价轮次名称' }] }]"
              placeholder="例如：2024-2024学年第一学期期中评价"
            />
          </a-form-item>
          
          <a-form-item label="评价时间范围">
            <a-range-picker
              v-decorator="['dateRange', { rules: [{ required: true, message: '请选择评价时间范围' }] }]"
              style="width: 100%"
              :disabledDate="disabledDate"
            />
          </a-form-item>
          
          <a-form-item label="评价类型">
            <a-radio-group v-decorator="['type', { initialValue: 'indicator' }]">
              <a-radio value="indicator">指标评价</a-radio>
              <a-radio value="non-indicator">非指标评价</a-radio>
            </a-radio-group>
          </a-form-item>
          
          <a-form-item label="参与评价人员" v-if="form.getFieldValue('type') === 'indicator'">
            <a-checkbox-group v-decorator="['participants', { initialValue: ['student', 'peer', 'teacher'] }]">
              <a-checkbox value="student">学生自评</a-checkbox>
              <a-checkbox value="peer">同学互评</a-checkbox>
              <a-checkbox value="teacher">任课教师评</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
          
          <a-form-item label="评价指标" v-if="form.getFieldValue('type') === 'indicator'">
            <a-button type="dashed" @click="addIndicator">添加指标</a-button>
            <a-table
              :columns="indicatorColumns"
              :dataSource="indicators"
              :pagination="false"
              rowKey="id"
              size="small"
            >
              <template slot="action" slot-scope="text, record">
                <a-button type="link" size="small" @click="editIndicator(record)">编辑</a-button>
                <a-button type="link" size="small" @click="removeIndicator(record)">删除</a-button>
              </template>
            </a-table>
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 指标编辑模态框 -->
      <a-modal
        :title="currentIndicator.id ? '编辑指标' : '添加指标'"
        :visible="indicatorModalVisible"
        @ok="handleIndicatorOk"
        @cancel="handleIndicatorCancel"
      >
        <a-form :form="indicatorForm">
          <a-form-item label="指标名称">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入指标名称' }] }]"
            />
          </a-form-item>
          <a-form-item label="指标权重">
            <a-input-number
              v-decorator="['weight', { rules: [{ required: true, message: '请输入权重' }] }]"
              :min="1"
              :max="100"
              :formatter="value => `${value}%`"
              :parser="value => value.replace('%', '')"
            />
          </a-form-item>
          <a-form-item label="指标描述">
            <a-textarea
              v-decorator="['description']"
              :rows="4"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
	import moment from 'moment'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      indicatorForm: this.$form.createForm(this),
      createModalVisible: false,
      indicatorModalVisible: false,
      currentIndicator: {},
      indicators: [
        { id: 1, name: '教学态度', weight: 20, description: '教师的教学态度是否认真负责' },
        { id: 2, name: '教学内容', weight: 30, description: '教学内容是否充实、前沿' },
        { id: 3, name: '教学方法', weight: 25, description: '教学方法是否得当，能否激发学生学习兴趣' },
        { id: 4, name: '教学效果', weight: 25, description: '教学效果是否显著，学生是否掌握所学知识' }
      ],
      currentEvaluations: [
        { id: 1, name: '2024-2024学年第一学期期中评价', startDate: '2024-10-10', endDate: '2024-10-20', type: '指标评价', participants: '学生自评,同学互评,任课教师评', status: '进行中' },
        { id: 2, name: '2024-2024学年第一学期课程评价', startDate: '2024-11-01', endDate: '2024-11-10', type: '非指标评价', participants: '任课教师评', status: '进行中' }
      ],
      historyEvaluations: [
        { id: 3, name: '2022-2023学年第二学期期末评价', startDate: '2024-06-10', endDate: '2024-06-20', type: '指标评价', participants: '学生自评,同学互评,任课教师评', status: '已结束' },
        { id: 4, name: '2022-2023学年第一学期期中评价', startDate: '2022-10-10', endDate: '2022-10-20', type: '指标评价', participants: '学生自评,任课教师评', status: '已结束' }
      ],
      currentEvaluationColumns: [
        { title: '评价轮次名称', dataIndex: 'name', key: 'name' },
        { title: '开始时间', dataIndex: 'startDate', key: 'startDate' },
        { title: '结束时间', dataIndex: 'endDate', key: 'endDate' },
        { title: '评价类型', dataIndex: 'type', key: 'type' },
        { title: '参与人员', dataIndex: 'participants', key: 'participants' },
        { title: '状态', dataIndex: 'status', key: 'status' },
        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      historyEvaluationColumns: [
        { title: '评价轮次名称', dataIndex: 'name', key: 'name' },
        { title: '开始时间', dataIndex: 'startDate', key: 'startDate' },
        { title: '结束时间', dataIndex: 'endDate', key: 'endDate' },
        { title: '评价类型', dataIndex: 'type', key: 'type' },
        { title: '参与人员', dataIndex: 'participants', key: 'participants' },
        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      indicatorColumns: [
        { title: '指标名称', dataIndex: 'name', key: 'name' },
        { title: '权重', dataIndex: 'weight', key: 'weight', customRender: (text) => `${text}%` },
        { title: '描述', dataIndex: 'description', key: 'description' },
        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } }
      ]
    };
  },
  methods: {
    showCreateModal() {
      this.createModalVisible = true;
    },
    handleCreateOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          // 这里应该调用API创建评价轮次
          this.$message.success('评价轮次创建成功');
          this.createModalVisible = false;
          this.form.resetFields();
        }
      });
    },
    handleCreateCancel() {
      this.createModalVisible = false;
      this.form.resetFields();
    },
    disabledDate(current) {
      // 不能选择今天之前的日期
      return current && current < moment(new Date()).endOf('day');
    },
    addIndicator() {
      this.currentIndicator = {};
      this.indicatorModalVisible = true;
      this.$nextTick(() => {
        this.indicatorForm.resetFields();
      });
    },
    editIndicator(record) {
      this.currentIndicator = { ...record };
      this.indicatorModalVisible = true;
      this.$nextTick(() => {
        this.indicatorForm.setFieldsValue({
          name: record.name,
          weight: record.weight,
          description: record.description
        });
      });
    },
    removeIndicator(record) {
      this.indicators = this.indicators.filter(item => item.id !== record.id);
      this.$message.success('指标删除成功');
    },
    handleIndicatorOk() {
      this.indicatorForm.validateFields((err, values) => {
        if (!err) {
          if (this.currentIndicator.id) {
            // 更新现有指标
            const index = this.indicators.findIndex(item => item.id === this.currentIndicator.id);
            this.indicators.splice(index, 1, { ...this.currentIndicator, ...values });
            this.$message.success('指标更新成功');
          } else {
            // 添加新指标
            const newId = this.indicators.length > 0 ? Math.max(...this.indicators.map(item => item.id)) + 1 : 1;
            this.indicators.push({ id: newId, ...values });
            this.$message.success('指标添加成功');
          }
          this.indicatorModalVisible = false;
        }
      });
    },
    handleIndicatorCancel() {
      this.indicatorModalVisible = false;
    },
    viewEvaluation(record) {
      this.$message.info(`查看评价轮次: ${record.name}`);
      // 实际应用中应该跳转到评价详情页面
    },
    editEvaluation(record) {
      this.$message.info(`编辑评价轮次: ${record.name}`);
      // 实际应用中应该打开编辑模态框并填充数据
    },
    closeEvaluation(record) {
      this.$confirm({
        title: '确认结束评价轮次?',
        content: `确定要结束评价轮次 "${record.name}" 吗? 结束后将无法再提交评价。`,
        onOk: () => {
          const index = this.currentEvaluations.findIndex(item => item.id === record.id);
          this.currentEvaluations[index].status = '已结束';
          this.$message.success('评价轮次已结束');
        },
        onCancel() {},
      });
    }
  }
};
</script>

<style scoped>
.ant-layout-header {
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
}
</style>